import React, {useCallback,useEffect,useState} from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import { useSelector,useDispatch } from'react-redux'

import NavBar from '@/components/navBar/NavBar'
import Card from '@/components/card/Card'
import Icon from '@/components/icon/Icon'
import Tag from '@/components/tag/Tag'
import Button from '@/components/button/Button'

import teamHomeimg from '@/assets/image/teamHome.png'
import doctorimg from '@/assets/image/doctorcard.png'

import {TeamHomeWrapper} from './styledTeamHome'
import {loadDataSaga} from './store/actionCreator'

export default function TeamHome() {
    const [teamid , setteamid] =useState()
    const list = useSelector(state => {
        return state.getIn(['teamHome','doctor'])
    })

    const location = useLocation()
    useEffect(() => {
        let id = location.pathname.split('/').pop()
        setteamid(id)
    },[location,setteamid])
    
    const dispatch = useDispatch()
    useEffect(() => {
        (async () => {
            let id = location.pathname.split('/').pop()
            await dispatch(loadDataSaga({"id":id}))
            
        })()
    }, [dispatch,teamid,location])

    const history = useHistory()
    const backTeam = useCallback(() => {
        history.goBack()
    },[history])

    const toApply = useCallback((id) => {
        return () => {
            history.push('/home/apply/'+id)
        }
    },[history])

    return (
        <TeamHomeWrapper>
            <NavBar
            title = '团队主页'
            leftArrow
            clickLeft = { backTeam}
            rightCount = {<Icon name = 'shareCircleFill'></Icon>}
            ></NavBar>
            <Card
            title = {list.get('name')}
            img = {teamHomeimg}
            height = '1.51rem'
            infoCount = {
                <div className='adress'>
                    所属机构：{list.get('hospital')}
                    <Icon 
                    name = 'arrowRightLine'
                    size = '.12rem'
                    ></Icon>
                </div>
            }
            bottomCount = {
                <div className='num'>
                    <span>签约人数：<b>500</b></span>
                </div>
            }
            ></Card>
            <div className='tag'>
                <Tag
                text = '慢病管理'
                color = '#3DD4A7'
                bgColor= '#D2F2EB'
                size = '.12rem'
                ></Tag>
                <Tag
                text = '中医服务'
                color = '#6C76F4'
                bgColor= '#DCE0FB'
                size = '.12rem'
                ></Tag>
                <Tag
                text = '老年人管理'
                color = '#FA746B'
                bgColor= '#F8DFDF'
                size = '.12rem'
                ></Tag>
            </div>
            <div className='doctor'>
                    <div className='dtitle'>
                        团队医生
                    </div>
                    {
                        list.get('doctors').map(item => {
                            return (
                                <Card
                                key = {item.get("id")}
                                    img = {doctorimg}
                                    topCount = {
                                        <div className='title'>
                                            <div className='name'>{item.get('name')}</div>
                                            <div className='job'>{item.get('job')}</div>
                                        </div>
                                    }
                                    infoCount = {
                                        <div className='num'>
                                            <span>签约人数：<b>45</b></span>
                                        </div>
                                    }
                                    height = '1rem'
                                    bgColor='#fff'
                                    rightCount = {
                                        <Button
                                        size = 'm-mini'
                                        bgColor= '#2984F8'
                                        text = '签约'
                                        ></Button>
                                    }
                                    ></Card>
                            )
                        })
                    }
                </div>
                <Button
                size = 'large'
                text = '申请签约'
                click = {toApply(list.get('id'))}
                ></Button>
        </TeamHomeWrapper>
    )
}
